<script type="text/javascript">
    if (typeof console == "undefined") {
        this.console = {
            log: function (msg) {}
        };
    }
    var ws, name, client_list={};

    function connect(){
        // 创建websocket
        ws = new WebSocket("ws://"+document.domain+":2346");
        // 当socket连接打开时，输入用户名
        ws.onopen = onopen;
        // 当有消息时根据消息类型显示不同信息
        ws.onmessage = onmessage;
        ws.onclose = function() {
            console.log("连接关闭，定时重连");
            connect();
        };
        ws.onerror = function() {
            console.log("出现错误");
        };
    }
    // 连接建立时发送登录信息
    function onopen()
    {
        if(!name)
        {
            name = prompt('输入你的名字：', '');
            if(!name || name=='null'){
                name = '游客';
            }
        }
        var login_data = '{"type":"login","client_name":"'+name.replace(/"/g, '\\"')+'","room_id":"房间1"}';
        console.log(login_data);
        ws.send(login_data);
    }

    // 服务端发来消息时
    function onmessage(e)
    {
        var data = eval("("+e.data+")");
        switch(data['type']){
            // 服务端ping客户端
            case 'ping':
                ws.send('{"type":"pong"}');
                break;;
            // 登录 更新用户列表
            case 'login':
                alert(data['data']);
        }
    }
    connect();
</script>
<style>
    *{
        margin:0;
        padding:0;
    }
    .meta{
        width:500px;
        height:800px;
        border-radius: 5%;
        border:3px solid #000;
        margin:10px auto;
        position:relative;
    }
    .login_info{
        width:100%;
        height:40px;
        border-bottom:3px solid #000;
        position:absolute;
        left:0;
        top:0;
        line-height:40px;
        text-align:center;
        display:none;
    }
</style>
<div class="meta">
    <div class="login_info">

    </div>
</div>